const handleWheel = (e: WheelEvent) => {
    if (!e.ctrlKey && !e.metaKey) return;
    e.preventDefault();

    if (wheelZoomTimeout === null) {
      initialZoom = getState().currentZoomLevel;
      accumulatedWheelScale = 1;
      initializeGestureState(e.clientX, e.clientY);
    } else {
      clearTimeout(wheelZoomTimeout);
    }
   
    // the deltaY always = 100 then zoomFactor always =0, so the accumulatedWheelScale always = 0.1
    // the deltaY always = 100 then zoomFactor always =0, so the accumulatedWheelScale always = 0.1
    // the deltaY always = 100 then zoomFactor always =0, so the accumulatedWheelScale always = 0.1

    const zoomFactor = 1 - e.deltaY * 0.01;
    accumulatedWheelScale *= zoomFactor;
    accumulatedWheelScale = Math.max(0.1, Math.min(10, accumulatedWheelScale));
    updateTransform(accumulatedWheelScale);

    wheelZoomTimeout = setTimeout(() => {
      wheelZoomTimeout = null;
      commitZoom();
      accumulatedWheelScale = 1;
    }, 150);
  };

// Utilizing deltaY sign instead of raw value to eliminate discrepancies between browsers
const zoomFactor = 1 - Math.sign(e.deltaY) * zoomStep; // Should this use zoomStep configured by the plugin config?
accumulatedWheelScale *= zoomFactor;
accumulatedWheelScale = clamp(accumulatedWheelScale, 0.1, 10);